<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="cw" uri="/widget-tags"%>
<%
String path = request.getContextPath(); 
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <cw:base/>
  </head>
  <%
  	//模拟字典缓存
  	java.util.Map dic = new java.util.HashMap();
  	dic.put("dicSex", "[[1,'男'],[2,'女']]");
  	application.setAttribute("dic", dic);
  %>
  <body>
  <!--  
   可编辑表格说明<br/>
   <li>1、内置编辑器类型:string(字符串),date(日期),time(时间),number(数值),int(整数),email(电子邮件),url(网址)
   <li>2、表单输入域作为编辑器:基本上继承ExtField的输入域都能作为编辑器，有些复杂的可能需要进行代码处理，目前测试的有numberField和combobox
   <li>3、selectMode:可选择radio,checkbox；设置为radio为单行选择,checobox为多行选择；
   <li>4、列标题没有设置时，默认按照property作为标题
   <li>5、现在固化了3中操作按钮,add()、delete()、update()，
   <li>6、新增记录，需要在gridColumn中设置默认值(defaultValue)，不设置默认值，系统会根据类型分别设置默认值，详细情况见tld
   -->
	<li>
		<b>可编辑表格构件通过在工具栏toolbar上定义按钮actionButton，来支持表格数据的添加、删除、更新和复制等编辑操作。</b>
	</li>
	<li>
		<b>actionButton的type属性为操作类型，可选值['','add','delete','remove','update','copy']。
		add、delete、remove、update、copy分别对应可编辑表格的添加、逐条删除、移除(统一删除)、更新和复制操作，
		其中type为update和delete的还需要设置url属性(默认值[grid url]!type)，分别指定其调用的后台操作url。</b>
	</li>
	<li>
		<b>要编辑的表格列需要在构件中设置editable属性为true，editorType属性为编辑器类型(默认值'string'，可选值['string','date','time','datetime','float','int','email','url'])，defaultValue属性为添加记录时该列的默认值。</b>
	</li>
	<li>
		<b>表格列构件会根据编辑器类型提供一个默认的列编辑器(如'string'是文本输入框，'date'是日期输入框)，也可以在其中自定义列编辑器，一般是表单元素构件。</b>
	</li>
	<br/>
	<br/>
	<li>
		可编辑表格，逐条删除数据，设置编辑工具栏按钮actionButton的type为delete
  	<cw:editGrid id="editGrid1" title="全编辑表格1"
  		url="../../../../sample/grid/grid.query.action"
  		exportable="false" enablePage="false" selectMode="checkbox"
  		urlParams="{id:0}" 
  		stripeRows="true" stripleColor="#C0C0C0" autoLoad="true" loadMask="true">
  		<cw:toolBar>
  			<cw:actionButton type="add" title="添加" split="true"></cw:actionButton>
  			<cw:actionButton type="delete" title="删除" split="true"  url="../../../../sample/grid/editgrid.delete.action" 
  			    waitMsg="正在删除数据..."/>
  			<cw:actionButton type="update" title="保存" split="true" url="../../../../sample/grid/editgrid.update.action" 
  			    waitMsg="正在保存数据..."/>
  			<cw:actionButton type="" action="alert('总记录:'+Ext.getCmp('editGrid1').getStore().getTotalCount());" 
  			    title="记录总数"/>
  			<cw:actionButton type="copy" title="复制"/>
  		</cw:toolBar>
  		<cw:gridColumn property="id" width="60" title="编号"/>
   		<cw:gridColumn property="name" editable="true" editorType="string" sortable="true" width="80" title="姓名" 
   		    defaultValue="xieguoking"/>
   		<cw:gridColumn property="email" editable="true" editorType="email"  sortable="true" width="120" title="邮箱"
   		    defaultValue="xieguoking@gmail.com"/>  		
  		<cw:gridColumn property="age" editable="true"  sortable="true" width="80" dataType="float" format="1--$" title="时薪" >
  			<cw:number property="age" allowDecimals="true" allowNegative="false" decimalPrecision="2"/>	 
  		</cw:gridColumn>
  		<cw:gridColumn property="birthday" editable="true"  sortable="true" width="80" dataType="date" editorType="date"  title="生日" 
  		    format="Y-m-d" defaultValue="1983-01-16T00:00:00"/>
  		<cw:gridColumn property="brother" editable="true" width="100" title="亲属" >
  			<cw:gridSelect property="brother" fields="['id','name']" width="400"
					url="../../../../sample/form/loadGridSelectData.action" title="人员结果列表"
					displayField="name" valueField="name" pageSize="5" listWidth="400" >
					<cw:gridSelectColumn width="100" property="id" header="编号" />
					<cw:gridSelectColumn width="200" property="name" header="姓名" />
			</cw:gridSelect>
  		</cw:gridColumn> 
  		<cw:gridColumn property="sex" dataType="code" format="dicSex" editable="true"  sortable="true" width="80" title="性别" 
  		    editorType="int" defaultValue="1">
  			<cw:combobox property="sex" data="[[1,'男'],[2,'女']]"/>
  		</cw:gridColumn> 
  		<cw:gridColumn property="created" title="创建时间" editable="true"  width="200" dataType="date" editorType="datetime" 
  		    defaultValue="1983-01-16T01:00:00"/>
  	</cw:editGrid>
  	<br/>
  	</li>
  	<li>
  		可编辑表格，移除(统一删除)数据，设置编辑工具栏按钮actionButton的type为remove，移除完数据再保存
  	<cw:editGrid id="editGrid2" title="全编辑表格2"
  		url="../../../../sample/grid/grid.query.action"
  		exportable="false" enablePage="false" selectMode="checkbox"
  		urlParams="{id:0}" 
  		stripeRows="true" stripleColor="#C0C0C0" autoLoad="true" loadMask="true">
  		<cw:toolBar>
  			<cw:actionButton type="add" title="添加" split="true"/>
  			<cw:actionButton type="remove" title="移除(统一删除)" split="true"/>
  			<cw:actionButton type="update" title="保存" split="true" url="../../../../sample/grid/editgrid.update.action" 
  			    waitMsg="正在保存数据..."/>
  			<cw:actionButton type="" action="alert('总记录:'+Ext.getCmp('editGrid2').getStore().getTotalCount());" title="记录总数"/>
  		</cw:toolBar>
  		<cw:indexColumn/> 
  		<cw:gridColumn property="id" width="60" title="编号"/>
   		<cw:gridColumn property="name" editable="true" editorType="string" sortable="true" width="120" title="姓名" 
   		    defaultValue="xieguoking"/>
   		<cw:gridColumn property="email" editable="true" editorType="email"  sortable="true" width="120" 
   		    defaultValue="xieguoking@gmail.com"/>
  		<cw:gridColumn property="age" editable="true"  sortable="true" width="80" dataType="int" defaultValue="27" format="1,000">
  			<cw:number property="age" allowDecimals="false" allowNegative="false"/>	 
  		</cw:gridColumn>
  		<cw:gridColumn property="birthday" editable="true"  sortable="true" width="80" dataType="date" editorType="date" 
  		    format="Y-m-d" defaultValue="1983-01-16T00:00:00"/>
  		<cw:gridColumn property="sex" rendererData="[[1,'男'],[2,'女']]" editable="true"  sortable="true" width="80" dataType="string" 
  		    editorType="int" defaultValue="1">
  			<cw:combobox property="sex" data="[[1,'男'],[2,'女']]"/>	
  		</cw:gridColumn> 
  		<cw:gridColumn property="created" title="创建时间" editable="true"  width="120" dataType="date" editorType="datetime" 
  		    defaultValue="1983-01-16T01:00:00"/>
  	</cw:editGrid>
  	<br/>
  	</li>
  </body>
  <cw:theme></cw:theme>
 </html>
 